<template>
    <a-form
        ref="schemaFormRef"
        class="SchemaForm"
        layout="vertical"
        :model="formState"
        name="schemaForm"
        autocomplete="off"
        @finish="onFinish"
    >
        <template v-if="selectedComSchema">
            <template v-for="formItem in selectedComSchema.config">
                <component
                    :is="FormComList[formItem.formItemName]"
                    :fromItemOption="formItem"
                    :formState="formState"
                ></component>
            </template>
        </template>
    </a-form>
</template>

<script setup>
import {
  reactive,
  toRefs,
  watch,
} from 'vue';

import {
  FormComList,
  PreviewCom,
} from '@activity/common-components';
const props = defineProps({
    selectedComSchema: {
        type: Object,
        required: true,
    },
});
const { selectedComSchema } = toRefs(props);

const formState = reactive(selectedComSchema.value?.formState || {});

const setFormState = () => {
    selectedComSchema.value?.config.forEach(formItem => {
        const { name, value } = formItem;
        formState[name] = value;
    });
};
watch(() => selectedComSchema.value, (value) => {
    console.log('selectedComSchema------', value);
    setFormState();
});
</script>

<style lang="less" scoped>
.SchemaForm{
    padding: 12px 16px;
}
</style>